<template>
  <div id="fenlei">
    {{ this.$store.state.fl.arr }}
    <div id="fenlei-l">
      <div>
        <p>普洱茶</p>
      </div>
      <div>
        <p>红茶</p>
      </div>
      <div>
        <p>绿茶</p>
      </div>
      <div>
        <p>乌龙茶</p>
      </div>
      <div>
        <p>黑茶</p>
      </div>
      <div>
        <p>白茶</p>
      </div>
      <div>
        <p>花草茶</p>
      </div>
      <div>
        <p>茶具</p>
      </div>
      <div>
        <p>茶书</p>
      </div>
    </div>

    <div id="fenlei-r">
      <div id="fenlei-r-1">
        <div id="box" v-for="(v,i) in arr" :key="i">
          <img :src="v.brand_pic" />
        </div>
      </div>
      <!-- 普洱茶 -->
      <div id="pe">
        <div id="pe-t">
          <span></span>
          <p>普洱茶</p>
          <span></span>
        </div>
        <div id="pe-b">
          <ul>
            <li>
              <div>
                <img
                  src="	https://www.chawo.com/mobile/resource/img/category/1043.jpg"
                />
              </div>
              <p>生茶</p>
            </li>
            <li>
              <div>
                <img
                  src="	https://www.chawo.com/mobile/resource/img/category/1052.jpg"
                />
              </div>
              <p>熟茶</p>
            </li>
            <li>
              <div>
                <img
                  src="	https://www.chawo.com/mobile/resource/img/category/1005.jpg"
                />
              </div>
              <p>膏茶</p>
            </li>
            <li>
              <div>
                <img
                  src="	https://www.chawo.com/mobile/resource/img/category/1001.jpg"
                />
              </div>
              <p>柑普茶</p>
            </li>
            <li>
              <div>
                <img
                  src="	https://www.chawo.com/mobile/resource/img/category/1003.jpg"
                />
              </div>
              <p>生熟套</p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 红茶 -->
      <div id="pe">
        <div id="pe-t">
          <span></span>
          <p>红茶</p>
          <span></span>
        </div>
        <div id="pe-b">
          <ul>
            <li>
              <div>
                <img
                  src="	https://www.chawo.com/mobile/resource/img/category/1044.jpg"
                />
              </div>
              <p>滇红茶</p>
            </li>
            <li>
              <div>
                <img
                  src="	https://www.chawo.com/mobile/resource/img/category/1011.jpg"
                />
              </div>
              <p>金骏眉</p>
            </li>
            <li>
              <div>
                <img
                  src="	https://www.chawo.com/mobile/resource/img/category/1012.jpg"
                />
              </div>
              <p>正山小种</p>
            </li>
            <li>
              <div>
                <img
                  src="	https://www.chawo.com/mobile/resource/img/category/1013.jpg"
                />
              </div>
              <p>祁门红茶</p>
            </li>
            <li>
              <div>
                <img
                  src="https://www.chawo.com/mobile/resource/img/category/1014.jpg"
                />
              </div>
              <p>英德红茶</p>
            </li>
            <li>
              <div>
                <img
                  src="	https://www.chawo.com/mobile/resource/img/category/1006.jpg"
                />
              </div>
              <p>其他红茶</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    arr() {
      return this.$store.state.fl.arr;
    }
  },
  created() {
    this.$store.dispatch("FLe", "/data/user");
  },
  // data() {
  //   return {
  //     obj: [],
  //   };
  // },
};
</script>

<style scoped>
div {
  font-size: 0;
}
#fenlei {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 0.54rem;
}
#fenlei-l {
  width: 25%;
  height: 100%;
  background-color: gainsboro;
  position: fixed;
  left: 0;
}
#fenlei-l div {
  width: 100%;
  height: 0.55rem;
  line-height: 0.55rem;
}
#fenlei-l div p {
  font-size: 0.14rem;
  text-align: center;
}
#fenlei-r {
  width: 75%;
  padding-left: 0.2rem;
  margin-bottom: .45rem;
}
#fenlei-r-1 {
  width: 100%;
  /* padding: 0 .1rem; */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#fenlei-r #box {
  width: 30%;
  border: 0.01rem solid gainsboro;
  border-radius: 0.05rem;
  padding: 0.08rem 0;
  margin-right: 0.08rem;
  margin-bottom: 0.1rem;
}
#fenlei-r #box img {
  width: 0.7rem;
  height: 0.24rem;
}
/* 普洱茶 */
#pe {
  width: 100%;
  padding: 0.1rem;
}
#pe-t {
  width: 100%;
  padding: 0.05rem 0;
  background-color: gainsboro;
  display: flex;
  justify-content: center;
}
#pe-t span {
  display: inline-block;
  width: 0.75rem;
  height: 0.02rem;
  background: ghostwhite;
  margin-top: 0.1rem;
}
#pe-t p {
  font-size: 0.14rem;
  display: inline-block;
}
#pe-b {
  width: 100%;
  margin: 0.15rem 0;
}
#pe-b ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
#pe-b ul li {
  width: 33%;
  text-align: center;
  margin-bottom: 0.1rem;
}
#pe-b ul li div {
  width: 0.75rem;
  height: 0.54rem;
}
#pe-b ul li div img {
  width: 100%;
  height: 100%;
}
#pe-b ul li p {
  font-size: 0.12rem;
  margin-top: 0.15rem;
}
</style>